<template>
  <div class="message-container">
    <home-header />
    <!-- 流星雨背景 -->
    <div class="meteor-background">
      <div v-for="n in 20" :key="n" class="meteor"></div>
    </div>

    <!-- 标题区域 -->
    <div class="title-section">
      <div class="title-box">
        <div class="title-header" @click="switchToDanmuMode">
          <h1>留言板</h1>
        </div>
        <div class="title-content">
          <p class="animated-text">{{ displayedText }}</p>
        </div>
      </div>
    </div>
    <!-- 卡片模式 -->
    <div v-show="!isDanmuMode" class="card-mode">
      <!-- 留言板区域 -->
      <div class="comment-section">
        <div class="comment-box">
          <div class="comment-tips">
            <span>* 配置单号的，请在这里留言即可，博主会第一时间回复</span>
          </div>
          <div class="comment-input">
            <textarea 
              v-model="content" 
              placeholder="写下你的留言" 
              class="comment-textarea"
            ></textarea>
            <div class="preview-area" v-if="previewImage">
              <div class="preview-image-wrapper">
                <img :src="previewImage" class="preview-image" />
                <el-icon class="remove-image" @click="removePreview"><CircleClose /></el-icon>
              </div>
            </div>
          </div>
          <div class="comment-actions">
            <div class="action-buttons">
              <el-button class="action-btn" @click="handlePictureClick">
                <el-icon><Picture /></el-icon>
              </el-button>
              <el-button class="action-btn" @click="handleEmojiClick">
                <el-icon><Promotion /></el-icon>
              </el-button>
            </div>
            <button class="publish-btn">发布</button>
          </div>
        </div>
      </div>

      <!-- 留言列表 -->
      <div class="comment-list">
        <div class="comment-header">
          <span class="comment-title">评论 15</span>
          <div class="comment-sort">
            <span 
              :class="{ active: sortType === 'asc' }" 
              @click="handleSort('asc')"
            >
              时间正序
            </span>
            <span 
              :class="{ active: sortType === 'desc' }" 
              @click="handleSort('desc')"
            >
              时间倒序
            </span>
          </div>
        </div>
        <div class="comment-items">
          <div v-for="message in sortedMessages" :key="message.id" class="comment-item">
            <div class="user-avatar">
              <img :src="message.avatar" alt="avatar" />
            </div>
            <div class="comment-content">
              <div class="user-info">
                <div class="user-badges">
                  <img class="badge" src="@/assets/images/best.png" alt="best" />
                  <span class="username">{{ message.username }}</span>
                  <span class="date">{{ message.date}} </span>
                </div>
                <div class="user-actions">
                  <div class="more-wrapper">
                    <el-icon class="action-icon" @click="toggleMoreActions(message)"><More /></el-icon>
                    <div class="more-actions" v-if="message.showMoreActions">
                      <span class="action-item" @click="handleBlock(message)">屏蔽</span>
                      <span class="action-item" @click="handleReport(message)">举报</span>
                    </div>
                  </div>
                  <el-icon class="action-icon" @click="toggleContent(message)"><Minus /></el-icon>
                </div>
              </div>
              <div class="comment-body" v-show="!message.isHidden">
                <div class="comment-text">{{ message.content }}</div>
                <div class="comment-actions">
                  <span class="reply-btn">回复</span>
                  <div class="action-btns">
                    <div class="like" @click="handleLike(message)">
                      <i class="like-icon">
                        <img src="@/assets/icons/likes.png">
                      </i>
                      <span>{{ message.likes }}</span>
                    </div>
                    <div class="dislike" @click="handleDislike(message)">
                      <i class="dislike-icon">
                        <img src="@/assets/icons/dislikes.png">
                      </i>
                      <span>{{ message.dislikes }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹幕模式 -->
    <div v-show="isDanmuMode" class="danmu-mode">
      <div class="danmu-container">
        <!-- 输入框区域 -->
        <div class="danmu-input-area">
          <input 
            type="text" 
            class="danmu-input"
            placeholder="发个弹幕吧..."
            v-model="danmuContent"
          />
          <button class="send-danmu-btn" @click="sendDanmu">发送</button>
        </div>

        <!-- 弹幕显示区域 -->
        <div class="danmu-display-area">
          <div v-for="danmu in danmuList" 
               :key="danmu.id" 
               class="danmu-item"
               :style="{ top: danmu.top + 'px' }"
          >
            <img class="danmu-avatar" :src="danmu.avatar" alt="avatar" />
            <span class="danmu-text">{{ danmu.content }}</span>
          </div>
        </div>

        <!-- 切换模式按钮 -->
        <div class="switch-mode-btn" @click="switchToDanmuMode">
          切换回卡片模式
        </div>
      </div>
    </div>

    <!-- 添加图片上传对话框 -->
    <el-dialog v-model="pictureDialogVisible" title="上传图片" width="30%">
      <!-- 这里调用后端接口，暂时实现不了上传 -->
      <el-upload
        class="upload-demo"
        drag
        action="/api/upload"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        accept="image/*"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处或 <em>点击上传</em>
        </div>
      </el-upload>
    </el-dialog>

    <!-- 添加emoji选择器对话框 -->
    <el-dialog v-model="emojiDialogVisible" title="选择表情" width="30%">
      <div class="emoji-container">
        <span 
          v-for="emoji in emojis" 
          :key="emoji"
          class="emoji-item"
          @click="selectEmoji(emoji)"
        >
          {{ emoji }}
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Promotion, Picture,  CircleClose, UploadFilled } from '@element-plus/icons-vue'
import homeHeader from '@/components/home-header.vue'
import { ElMessage } from 'element-plus'

// 定义 openMessageDialog 方法
const openMessageDialog = () => {
  console.log('Open message dialog')
}

// 模拟数据
const messages = ref([
  {
    id: 1,
    username: '游客3120e',
    avatar: 'https://img1.baidu.com/it/u=2428633766,2346781629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    content: '111',
    day: '8天前',
    date: '2025-02-21 10:00:00',
    comments: 0,
    likes: 0,
    dislikes: 0,
    isHidden: false,
    showMoreActions: false
  },
  {
    id: 2,
    username: '游客616f',
    avatar: 'https://img1.baidu.com/it/u=2428633766,2346781629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    content: '111',
    day: '8天前',
    date: '2025-02-21 12:00:00',
    comments: 0,
    likes: 0,
    dislikes: 0,
    isHidden: false,
    showMoreActions: false
  }
])

const fullText = '生活原本沉闷，但跑起来就会有风！'
const displayedText = ref('')
let index = 0

const nickname = ref('')
const qq = ref('')
const content = ref('')

const publishMessage = () => {
  // 发布留言的逻辑
  console.log('发布留言', {
    nickname: nickname.value,
    qq: qq.value,
    content: content.value
  })
}

// 切换内容显示/隐藏
const toggleContent = (message) => {
  message.isHidden = !message.isHidden
}

// More Actions Dialog
const moreActionsVisible = ref(false)
const currentMessage = ref(null)

const toggleMoreActions = (message) => {
  // 关闭其他消息的更多操作菜单
  messages.value.forEach(m => {
    if (m.id !== message.id) {
      m.showMoreActions = false
    }
  })
  // 切换当前消息的更多操作菜单
  message.showMoreActions = !message.showMoreActions
}

const handleReport = () => {
  console.log('举报消息:', currentMessage.value)
  moreActionsVisible.value = false
}

const handleBlock = (message) => {
  // 隐藏评论内容
  message.isHidden = true
  // 关闭更多操作菜单
  message.showMoreActions = false
}

const handleLike = (message) => {
  message.likes++
}

const handleDislike = (message) => {
  message.dislikes++
}

// 图片上传相关
const pictureDialogVisible = ref(false)
const handlePictureClick = () => {
  pictureDialogVisible.value = true
}

const previewImage = ref('')

const handleUploadSuccess = (response) => {
  // 设置预览图片
  previewImage.value = response.url
  // 在光标位置插入图片标记
  content.value += `[图片]`
  pictureDialogVisible.value = false
}

const removePreview = () => {
  previewImage.value = ''
  // 移除内容中的[图片]标记
  content.value = content.value.replace('[图片]', '')
}

const handleUploadError = () => {
  ElMessage.error('图片上传失败')
}

// emoji相关
const emojiDialogVisible = ref(false)
const emojis = ref(['😀', '😂', '🤣', '😊', '😍', '🥰', '😘', '😋', '🤔', '😮', '😴', '😷', 
                   '👍', '👎', '👏', '🙌', '🤝', '👋', '❤️', '💔', '💯', '⭐', '🌟', '🎉'])

const handleEmojiClick = () => {
  emojiDialogVisible.value = true
}

const selectEmoji = (emoji) => {
  // 在光标位置插入表情
  content.value += emoji
  emojiDialogVisible.value = false
}

// 排序类型
const sortType = ref('asc')

// 排序后的消息列表
const sortedMessages = computed(() => {
  const msgs = [...messages.value]
  
  switch (sortType.value) {
    case 'desc':
      return msgs.sort((a, b) => {
        // 使用 date 字段进行时间比较
        return new Date(b.date) - new Date(a.date)
      })
    case 'asc':
      return msgs.sort((a, b) => {
        // 使用 date 字段进行时间比较
        return new Date(a.date) - new Date(b.date)
      })
    case 'reply':
      return msgs.sort((a, b) => b.comments - a.comments)
    default:
      return msgs
  }
})

// 处理排序点击
const handleSort = (type) => {
  sortType.value = type
}

// 添加模式控制状态
const isDanmuMode = ref(false)

// 修改切换模式的方法
const switchToDanmuMode = () => {
  isDanmuMode.value = !isDanmuMode.value
  ElMessage({
    message: isDanmuMode.value ? '已切换到弹幕模式~' : '已切换回卡片模式~',
    type: 'success',
    duration: 2000
  })
}

// 在 script setup 中添加模拟弹幕数据
const mockDanmus = [
  {
    id: 1,
    avatar: 'https://img1.baidu.com/it/u=2428633766,2346781629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    content: '太强了！',
    top: 50
  },
  {
    id: 2,
    avatar: 'https://img1.baidu.com/it/u=2428633766,2346781629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    content: '学习~',
    top: 120
  },
  {
    id: 3,
    avatar: 'https://img1.baidu.com/it/u=2428633766,2346781629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    content: '96666',
    top: 180
  }
]

// 修改弹幕列表的初始值
const danmuList = ref(mockDanmus)

// 修改发送弹幕方法
const sendDanmu = () => {
  if (!danmuContent.value.trim()) return
  
  const newDanmu = {
    id: Date.now(),
    avatar: 'https://img1.baidu.com/it/u=2428633766,2346781629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    content: danmuContent.value,
    top: Math.random() * (window.innerHeight - 300) + 50
  }
  
  danmuList.value.push(newDanmu)
  danmuContent.value = ''
}

onMounted(() => {
  const interval = setInterval(() => {
    if (index < fullText.length) {
      displayedText.value += fullText[index]
      index++
    } else {
      clearInterval(interval)
    }
  }, 400)
})
</script>

<style scoped lang="scss">
@use "sass:math";

.message-container {
  min-height: 100vh;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

// 流星雨背景
.meteor-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(to bottom, #1a1a1a, #2d3436);
  overflow: hidden;
  width: 100vw;
}

.meteor {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: meteor linear infinite;

  @for $i from 1 through 20 {
    &:nth-child(#{$i}) {
      $delay: math.div(math.random() * 20, 1) + s;
      $duration: math.div(math.random() * 10 + 10, 1) + s;
      $top: math.div(math.random() * 40, 1) + vh;
      $left: math.div(math.random() * 100, 1) + vw;

      top: $top;
      left: $left;
      animation-delay: $delay;
      animation-duration: $duration;
    }
  }
}

@keyframes meteor {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(-100vw) translateY(100vh) rotate(-45deg);
    opacity: 0;
  }
}

.title-section {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 55px;
  padding: 20px 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  margin-left: auto;
  margin-right: auto;
}

.title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  width: 50%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-height: 150px;
  margin: 0 auto;
}

.title-header {
  width: 60%;
  cursor: pointer;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }

  h1 {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
}

.animated-text {
  font-size: 16px;
  opacity: 0.9;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  min-height: 24px;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

/** 评论区样式 */
.comment-section {
  width: 40%;
  margin: 20px auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.comment-box {
  padding: 16px;
}

.comment-tips {
  margin-bottom: 10px;
  
  span {
    color: #999;
    font-size: 12px;
  }
}

.comment-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  
  .comment-textarea {
    width: 96%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    font-size: 14px;
    resize: vertical;
    
    &::placeholder {
      color: #999;
    }
    
    &:focus {
      border-color: #e2251b;
      outline: none;
    }
  }
}

.preview-area {
  margin-top: 10px;
  
  .preview-image-wrapper {
    position: relative;
    display: inline-block;
    
    .preview-image {
      max-width: 200px;
      max-height: 200px;
      border-radius: 4px;
    }
    
    .remove-image {
      position: absolute;
      top: -8px;
      right: -8px;
      padding: 2px;
      background: white;
      border-radius: 50%;
      cursor: pointer;
      color: #e2251b;
      font-size: 16px;
      
      &:hover {
        color: #f5222d;
      }
    }
  }
}

.comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  
  .action-buttons {
    display: flex;
    gap: 8px;
    
    .action-btn {
      padding: 8px;
      height: 32px;
      border: 1px solid #e4e4e4;
      background: transparent;
      
      .el-icon {
        font-size: 16px;
        color: #666;
      }
      
      &:hover {
        border-color: #e2251b;
        .el-icon {
          color: #e2251b;
        }
      }
    }
  }
  
  .publish-btn {
    padding: 0 20px;
    height: 32px;
    background: #e2251b;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    
    &:hover {
      background: #f5222d;
    }
  }
}

/** 评论列表样式 */
.comment-list {
  width: 40%;
  margin: 20px auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  .comment-title {
    font-size: 16px;
    font-weight: bold;
  }
  
  .comment-sort {
    display: flex;
    gap: 15px;
    
    span {
      color: #666;
      cursor: pointer;
      font-size: 14px;
      
      &.active {
        color: #e2251b;
      }
    }
  }
}

.comment-items {
  .comment-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    
    .user-avatar {
      width: 40px;
      height: 40px;
      transition: transform 0.6s ease;
      
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      
      &:hover {
        transform: rotate(360deg);
      }
      
      // 鼠标离开时的动画
      @keyframes rotateBack {
        from {
          transform: rotate(360deg);
        }
        to {
          transform: rotate(0deg);
        }
      }
      
      &:not(:hover) {
        animation: rotateBack 0.6s ease;
      }
    }
    
    .comment-content {
      flex: 1;
      
      .user-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .user-badges {
          display: flex;
          align-items: center;
          gap: 5px;
          
          .username {
            color: #333;
            font-size: 14px;
            transition: transform 0.3s ease;
            
            &:hover {
              transform: scale(1.2);
              cursor: pointer;
            }
          }
          .year {
            color: #999;
            font-size: 12px;
          }
        }
        
        .user-actions {
          display: flex;
          gap: 8px;
          
          .more-wrapper {
            position: relative;
            
            .more-actions {
              position: absolute;
              top: 20px;
              right: 0;
              background: white;
              border-radius: 4px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
              z-index: 1000;
              
              .action-item {
                display: block;
                padding: 8px 16px;
                color: #333;
                font-size: 14px;
                cursor: pointer;
                white-space: nowrap;
                
                &:hover {
                  color: #e2251b;
                  background: #f5f5f5;
                }
                
                &:not(:last-child) {
                  border-bottom: 1px solid #f0f0f0;
                }
              }
            }
          }
        }
      }
      
      .comment-body {
        transition: all 0.3s ease;
      }
      
      .comment-text {
        color: #333;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 8px;
      }
      
      .comment-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .reply-btn {
          color: #666;
          font-size: 12px;
          cursor: pointer;
        }
        
        .action-btns {
          display: flex;
          gap: 15px;
          
          .like, .dislike {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            
            span {
              font-size: 12px;
              color: #666;
            }
            
            &:hover {
              span {
                color: #e2251b;
              }
            }
          }
        }
      }
    }
  }
}

.more-actions-dialog {
  :deep(.el-dialog__header) {
    display: none;
  }
  
  :deep(.el-dialog__body) {
    padding: 0;
  }
}

.more-actions-list {
  .action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    .el-icon {
      font-size: 16px;
      color: #666;
    }
    
    span {
      color: #333;
      font-size: 14px;
    }
    
    &:hover {
      background-color: #f5f5f5;
      
      .el-icon {
        color: #e2251b;
      }
      
      span {
        color: #e2251b;
      }
    }
    
    &:not(:last-child) {
      border-bottom: 1px solid #f0f0f0;
    }
  }
}

.emoji-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  
  .emoji-item {
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    
    &:hover {
      background-color: #f5f5f5;
    }
  }
}

.upload-demo {
  :deep(.el-upload-dragger) {
    width: 100%;
  }
}

.danmu-mode {
  width: 40%;
  height: calc(100vh - 200px);
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
}

.danmu-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

.danmu-input-area {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  gap: 10px;
  z-index: 10;
  
  .danmu-input {
    flex: 1;
    height: 40px;
    padding: 0 15px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 14px;
    
    &::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }
    
    &:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.3);
    }
  }
  
  .send-danmu-btn {
    padding: 0 20px;
    height: 40px;
    border: none;
    border-radius: 20px;
    background: #e2251b;
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f5222d;
      transform: scale(1.05);
    }
  }
}

.danmu-display-area {
  width: 100%;
  height: calc(100% - 80px);
  position: relative;
  overflow: hidden;
}

.danmu-item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: danmuMove 15s linear;
  opacity: 0.9;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.1);
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
  }
  
  .danmu-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .danmu-text {
    color: white;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
}

@keyframes danmuMove {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-150%);
  }
}

.switch-mode-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  
  &:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
  }
}

// 添加卡片模式的样式
.card-mode {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>